<div class="container-fluid">
  <div class="content-block">
    <p class="lead mt-3 mb-2">
      SQL Editor
      <i class="fas fa-info-circle ms-1" [placement]="'auto'" [tooltip]="'A minimalistic SQL Editor to run custom queries'"></i>
    </p>

    <textarea id="code" class="mb-1" [(ngModel)]="service.code" (keydown.f9)="execute()" rows="6"></textarea>

    <div class="row">
      <div class="col-sm-7">
        <button type="button" class="btn btn-secondary btn-sm me-2" (click)="copy()" id="copy-btn">
          <i class="fa fa-copy fa-sm"></i> Copy
        </button>
        <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">
          <i class="fa fa-bolt fa-sm"></i> Execute (F9)
        </button>
      </div>
      <div class="col-sm-5">
        <div class="wiki-link">
          <a [href]="docUrl" target="_blank"> <i class="fas fa-link"></i> learn the SQL language </a>
        </div>
      </div>
    </div>

    <keira-query-error [error]="error"></keira-query-error>

    <p *ngIf="affectedRows > -1; else queryResults" id="affected-rows-box" class="mt-2">
      <code class="hljs"
        >Affected rows: <strong>{{ affectedRows }}</strong> {{ message }}</code
      >
    </p>
    <ng-template #queryResults>
      <hr />
      <!--    Display: <select [(ngModel)]="displayLimit" class="select-limit">-->
      <!--      <option *ngFor="let option of displayLimitOptions" [value]="option">{{ option }}</option>-->
      <!--    </select>-->
      <ngx-datatable
        id="editor-table"
        class="bootstrap table table-striped text-center mt-1"
        [rows]="rows"
        [headerHeight]="DTCFG.headerHeight"
        [footerHeight]="DTCFG.footerHeight"
        [columnMode]="DTCFG.columnMode"
        [rowHeight]="DTCFG.rowHeight"
        [limit]="20"
      >
        <ngx-datatable-column
          *ngFor="let col of columns"
          [prop]="col"
          [minWidth]="columns.length === 1 ? 300 : 100"
          [resizeable]="true"
        ></ngx-datatable-column>
      </ngx-datatable>
    </ng-template>
  </div>
</div>
